<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    img {
        width: 50px;
        height: 50px;
        background-color: pink;
        fill: blue;
    }

    .svg1 {
        background-color: pink;
        height: 200px;
        width: 100%;
        /* display: none; */
        /* transition: all 2s; */
    }
    line{
        stroke-width: 2;
    }
    .line{
        transition: all 1s;
        /* transform: rotateZ(35deg); */
    }
    .line:hover{
        stroke:skyblue;
    }
    .svg2{
        width: 200px;
        height: 200px;
        background-color: blue;
    }
    .xian{
        transform-origin: center;
        animation: run 0.2s linear infinite
    }
    @keyframes run{
        from{
            transform: rotate(0deg);
        }
        to{
            transform: rotate(360deg);
        }
    }
</style>

<body>
    <img src="./img/shopping.svg" alt="">
    <svg class="svg1">
        <line x1="50" y1="50" x2="50" y2="150" stroke="blue" class="line"></line>
        <line x1="50" y1="150" x2="100" y2="150" stroke="blue"></line>

        <line x1="150" y1="50" x2="150" y2="150" stroke="blue"></line>
        <line x1="200" y1="50" x2="200" y2="150" stroke="blue"></line>
        <line x1="150" y1="50" x2="200" y2="50" stroke="blue"></line>
        <line x1="150" y1="150" x2="200" y2="150" stroke="blue"></line>

        <line x1="250" y1="50" x2="275" y2="150" stroke="blue"></line>
        <line x1="300" y1="50" x2="275" y2="150" stroke="blue"></line>

        <line x1="350" y1="50" x2="350" y2="150" stroke="blue"></line>
        <line x1="350" y1="50" x2="400" y2="50" stroke="blue"></line>
        <line x1="350" y1="100" x2="400" y2="100" stroke="blue"></line>
        <line x1="350" y1="150" x2="400" y2="150" stroke="blue"></line>
    </svg>

    <svg class="svg2">
        <line x1="50" y1="50" x2="150" y2="150" stroke="black" class="xian"></line>
    </svg>
</body>

</html>